<script setup lang="js">
import Tabbar from './components/Tabbar.vue';

</script>

<template>
  <!-- 顶部导航栏 -->
  <nav id="router-nav">
    <div @click.native=$router.back v-if="['验证', '产品制作'].includes($route.name)">
      <img src="./components/icons/左箭头.svg" alt="返回">
    </div>

    <router-link to="/" v-if="['口袋集市', '个人中心', '口袋胶囊', '我的订单'].includes($route.name)">
      <img src="./components/icons/通知铃铛.svg" alt="通知">
    </router-link>
    {{ $route.name }}
  </nav>

  <!-- 路由显示 -->
  <RouterView></RouterView>

  <!-- 底部导航栏 -->
  <Tabbar></Tabbar>
</template>

<style>
body {
  margin: 0;
  /* 点点背景 */
  --dot-color: #979797;
  --dot-size: 20px;

  background-image: radial-gradient(circle, var(--dot-color) 0.5px, transparent 0.8px);
  background-size: var(--dot-size) var(--dot-size);
}
</style>

<style scoped src="./App.css"></style>